<template>
	<navigator url="../../pages/guangHistory/guangHistory">
	<uni-section title="光伏发电" type="line" style="margin-bottom: 3px;">
		    <image src="../../static/mipmap-xxxhdpi/icon_next.png" mode=""
			 style="width: 20rpx;height: 30rpx;float: right;margin-top: -23px;margin-right: 5px;"></image>
		   <span>历史记录</span>
	</uni-section>
	</navigator>
	<view class="line">
		<view class="line1" v-for="item,index in guangfu" :key="index">
			 <p :class="{ 'red-text': item.status !== 1 }">{{ item.status === 1 ? '正常' : '故障' }}</p>
			 <p class="text">当前状态</p>
		</view>
		<view class="line1" v-for="item,index in guangfu" :key="index">
			<p>{{item.power}}mw</p>
			<p class="text">当前功率</p>
		</view>
		<view class="line1" v-for="item,index in guangfu" :key="index">
			<p>{{item.power_sum}}mw</p>
			<p class="text">光伏总功率</p>
		</view>
	</view>
	<view class="charts-box">
		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
	</view>
	<!-- <button @click="add">222</button> -->
</template>

<script setup>
	import {
		defineComponent,
		reactive,
		ref
	} from 'vue';
	import {
		Solar,
		Guang
	} from '@/utils/file.js';
	 let guangfu = reactive([])
	const chartData = ref({});
	const opts = ref({
		color: ["#1890FF", "#6fa8b4"],
		padding: [15, 15, 0, 5],
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			data: [],
			splitNumber: 6
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
			}
		},
		dataLabel: false // 取消柱状图上的数字
	});

	const getServerData = () => { 
		
		// 柱状图数据
		Solar(uni.getStorageSync('token')).then(response => {
			console.log(response, "光伏1");
			guangfu.push(...[response.data.guangfu_result.gailan])
			console.log(guangfu,"光伏");
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				if (response.data.guangfu_result.fadian.length === 0) {
					console.error('未获取到发电数据');
					return;
				}
				
				// 确认从服务器获取的数据包含 month 属性
				const hasMonthProperty = Object.prototype.hasOwnProperty.call(response
					.data.guangfu_result.fadian[0], 'month');
				if (!hasMonthProperty) {
					console.error('未找到名为 month 的属性');
					return;
				}
				let Date4 = response.data.guangfu_result.fadian.map(
								item => item.power);
				       
				let max = Math.max(...Date4); // 计算最大值
				// 根据从服务器获取的数据生成 categories 数组
				const categories = response.data.guangfu_result.fadian.map(item => item
					.month + "月");

				// 生成 chartData 对象，其中 categories 和 series 分别使用上述数组和原始数据生成
				const newChartData = {
					categories,
					series: [{
							name: "发电量(mwh)",
							data: response.data.guangfu_result.fadian.map(
								item => item.power)
						},
						{
							name: "发电收入(千元)",
							data: response.data.guangfu_result.fadian.map(
								item => item.income)
						}
					]
				};
				opts.value.yAxis.data = [{
				  min: 0,
				  max: Math.ceil(max)
				}];
				chartData.value = JSON.parse(JSON.stringify(newChartData));
			});
		});
	};

	getServerData();

	
</script>
<style scoped lang="scss">
	$nav-height: 30px;

	.charts-box {
		width: 100%;
		height: 230px;
	}

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;

	}

	span {
		display: inline-block;
		float: right;
		margin-right: 20px;
		margin-top: -24px;
	}

	.line {
		width: 90%;
		height: 150rpx;
		// background-color: aqua;
		border-top: 1px solid #cacaca;
		margin: 0 auto;

	}

	.line1 {
		width: 220rpx;
		height: 80%;
		text-align: center;
		// border:1px solid;
		display: inline-block;
	}
	
	p{
		height: 70rpx;
		line-height: 70rpx;
		// border: 1px solid;
	}
	.red-text{
		color: red;
	}
</style>